<template>
  <div class="children">
    <el-divider>基本信息</el-divider>
    <div>
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="标准编号">{{ form.levelNum || '-' }}</el-descriptions-item>
        <el-descriptions-item label="标准名称">{{ form.levelName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <dict-tag :options="statusFlag" :value="form.status" />
        </el-descriptions-item>
        <el-descriptions-item label="标准说明">{{ form.explanation || '-' }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider>适用设备</el-divider>
    <el-table v-loading="loading" :data="form.eaPartInfoVos">
      <el-table-column label="序号" align="center" width="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="设备编号" align="center" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.equipmentNum || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="设备名称" align="center" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.equipmentName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="品牌" align="center" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.brand || '-' }}
          <!-- <dict-tag :options="statusFlag" :value="scope.row.status" /> -->
        </template>
      </el-table-column>
      <el-table-column label="规格型号" align="center" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.model || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="供应商" align="center" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.supplierName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="单位" align="center" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.unitName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类别" align="center" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.typeName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" min-width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.remark || '-' }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-divider>保养项目</el-divider>
    <el-table v-loading="loading" :data="form.upkeepProjects">
      <el-table-column label="序号" align="center" width="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="模块" align="center" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.moduleName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="项目" align="center" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.projectName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="保养类型" align="center" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.typeName || '-' }}
          <!-- <dict-tag :options="statusFlag" :value="scope.row.status" /> -->
        </template>
      </el-table-column>
      <el-table-column label="描述" align="center" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.explanation || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center" min-width="120">
        <template slot-scope="scope">
          {{ ['选项', '极值', '输入'][scope.row.kind] || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="下限" align="center" min-width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.contentI || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上限" align="center" min-width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.contentII || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="可选项" align="center" min-width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.contentI || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="正常选项" align="center" min-width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.contentII || '-' }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getlevelChildren } from '@/api/maintenance/insurance/insurance.js'
export default {
  name: 'detailed',
  props: ['rowObj'],
  components: {
    // Upload
  },
  data () {
    return {
      form: {
      },
      loading: false,
      noticeList: [],
      rules: {
        equipmentName: { required: true, message: '必填', trigger: 'blur' },
        brand: { required: true, message: '必填', trigger: 'blur' },
        model: { required: true, message: '必填', trigger: 'blur' },
        supplierId: { required: true, message: '必填', trigger: 'blur' },
        typeId: { required: true, message: '必填', trigger: 'blur' },
        unit: { required: true, message: '必填', trigger: 'blur' },
        meterageFlag: { required: true, message: '必填', trigger: 'blur' },
        image: { required: true, message: '必填', trigger: 'blur' },
        meterageNum: { required: true, message: '必填', trigger: 'blur' },
      }
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    async getlist () {
      this.loading = true
      let res = await getlevelChildren(this.rowObj.upkeepLevelId);
      this.loading = false
      this.form = res.data
    },
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  // text-align: center;
  width: 90%;
  margin: 0px auto;
}

.children ::v-deep .el-descriptions--medium.is-bordered .el-descriptions-item__cell {
  text-align: center;
}
</style>